<template>
   <div style="padding-left: 24px;height: 20px;color: #989DAA; margin-top: 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">运行管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">失物招领管理</el-breadcrumb-item>
        <el-breadcrumb-item style="color: #535862;">捡拾物品登记</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
   <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="存放中" name="first">
      <layout-card :filters="goodsRegStoreOptions" headline="捡拾物品公示" @search-change="searchChange" @search-reset="searchReset">
        <template #action>
          <el-button type="primary" @click="handleBatchReceive">批量接收</el-button>
          <el-button type="primary" @click="handleApplyStorage">申请入库</el-button>
          <el-button type="primary" @click="handleCreate">新增</el-button>
        </template>
        <div class="table-common">
          <div class="goods">
            <div class="goods_content" v-for="(item, index) in tableData" :key="index" @click="goodsClick(item)">
              <img
                :src="image.loginBg"
                class="image"
              />
              <div class="message">
                <div class="message_content">
                  <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                  <!-- <div class="terminal">{{ item['terminal'] }}</div> -->
                </div>
                <div class="message_content" style="margin-top: 8px;">
                  <div class="headline">物品类型：</div>
                  <div class="headline_content">{{ item['goodsType'] }}</div>
                </div>
                <div class="message_content" style="margin-top: 4px;">
                  <div class="headline">遗失时间：</div>
                  <div class="headline_content">{{ item['loseTime'] }}</div>
                </div>
                <div class="message_content" style="margin-top: 4px;">
                  <div class="headline">遗失地：</div>
                  <div class="headline_content">{{ item['losePlace'] }}</div>
                </div>
                <div class="message_content" style="margin-top: 4px;">
                  <div class="headline">失主姓名：</div>
                  <div class="headline_content">{{ item['ownersName'] }}</div>
                </div>
              </div>
              <div :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '2' ? 'red_overdue' : 'green_overdue')">
                {{ item['overdue'] === '0' ? '' : (item['overdue'] === '2' ? '已过期' : '14小时后过期') }}
              </div>
            </div>
          </div>
          <div>
            <TablePagination
              :small="false"
              :pagination="pager"
              @current-change="currentChange"
              @size-change="sizeChange"
            />
          </div>
        </div>
      </layout-card>
    </el-tab-pane>
      <el-tab-pane label="已归还" name="second">
        <layout-card :filters="goodsRegReturnOptions" headline="捡拾物品公示" @search-change="searchChange" @search-reset="searchReset">
          <div class="table-common">
            <div class="goods">
                <div class="goods_content" style="background: #D3D4D5;" v-for="(item, index) in tableData" :key="index">
                  <img
                    :src="image.logoIcon"
                    class="image"
                  />
                  <div class="message">
                    <div class="message_content">
                      <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                    </div>
                    <div class="message_content" style="margin-top: 8px;">
                      <div class="headline">物品类型：</div>
                      <div class="headline_content">{{ item['goodsType'] }}</div>
                    </div>
                    <div class="message_content" style="margin-top: 4px;">
                      <div class="headline">遗失时间：</div>
                      <div class="headline_content">{{ item['loseTime'] }}</div>
                    </div>
                    <div class="message_content" style="margin-top: 4px;">
                      <div class="headline">遗失地：</div>
                      <div class="headline_content">{{ item['losePlace'] }}</div>
                    </div>
                    <div class="message_content" style="margin-top: 4px;">
                      <div class="headline">失主姓名：</div>
                      <div class="headline_content">{{ item['ownersName'] }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <TablePagination
                  :small="false"
                  :pagination="pager"
                  @current-change="currentChange"
                  @size-change="sizeChange"
                />
              </div>
          </div>
        </layout-card>
      </el-tab-pane>
    </el-tabs>
    <!-- <layout-card :filters="exampleOptions" headline="遗失物品公示" @search-change="searchChange" @search-reset="searchReset">
      <template #action>
        <el-button type="primary" @click="handleCreate">批量接收</el-button>
        <el-button type="primary" @click="handleCreate">申请入库</el-button>
        <el-button type="primary" @click="handleCreate">新增</el-button>
      </template>
      <div class="table-common">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="存放中" name="first">
                <div class="goods">
                  <div class="goods_content" v-for="(item, index) in tableData" :key="index" @click="goodsClick(item)">
                    <img
                      :src="image.loginBg"
                      class="image"
                    />
                    <div class="message">
                      <div class="message_content">
                        <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                        <div class="terminal">{{ item['terminal'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 8px;">
                        <div class="headline">物品类型：</div>
                        <div class="headline_content">{{ item['goodsType'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失时间：</div>
                        <div class="headline_content">{{ item['loseTime'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失地：</div>
                        <div class="headline_content">{{ item['losePlace'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">失主姓名：</div>
                        <div class="headline_content">{{ item['ownersName'] }}</div>
                      </div>
                    </div>
                    <div :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '1' ? 'red_overdue' : 'green_overdue')">
                      {{ item['overdue'] === '0' ? '' : (item['overdue'] === '1' ? '已过期' : '14小时后过期') }}
                    </div>
                  </div>
                </div>
                <div>
                  <TablePagination
                    :small="false"
                    :pagination="pager"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                  />
                </div>
            </el-tab-pane>
            <el-tab-pane label="已归还" name="second">
              <div class="goods">
                  <div class="goods_content" v-for="(item, index) in tableData" :key="index">
                    <img
                      :src="image.logoIcon"
                      class="image"
                    />
                    <div class="message">
                      <div class="message_content">
                        <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                        <div class="terminal">{{ item['terminal'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 8px;">
                        <div class="headline">物品类型：</div>
                        <div class="headline_content">{{ item['goodsType'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失时间：</div>
                        <div class="headline_content">{{ item['loseTime'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失地：</div>
                        <div class="headline_content">{{ item['losePlace'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">失主姓名：</div>
                        <div class="headline_content">{{ item['ownersName'] }}</div>
                      </div>
                    </div>
                    <div :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '1' ? 'red_overdue' : 'green_overdue')">
                      {{ item['overdue'] === '0' ? '' : (item['overdue'] === '1' ? '已过期' : '14小时后过期') }}
                    </div>
                  </div>
                </div>
                <div>
                  <TablePagination
                    :small="false"
                    :pagination="pager"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                  />
                </div>
            </el-tab-pane>
        </el-tabs>
      </div>
    </layout-card> -->
    <edit-dialog
      :centerDialogVisible="centerDialogVisible"
      :default-button="defaultButton"
      :tilte="tilte"
      @Cancel="Cancel"
      @Submit="Submit"
      :width="dialogWidth"
    >
      <template #content>
        <div class="detail_content">
          <img
            class="content_img"
            :src="image.loginBg"
          />
          <div class="detail_body">
            <div class="body_message">
              <div class="message_title">物品名称：</div>
              <div class="message_content">{{ goodsObject['name'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">物品类型：</div>
              <div class="message_content">{{ goodsObject['type'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">保质期：</div>
              <div class="message_content">{{ goodsObject['expiration'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">捡拾人姓名：</div>
              <div class="message_content">{{ goodsObject['ownersName'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">航站楼[捡拾]：</div>
              <div class="message_content">{{ goodsObject['ownersPhone'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title" style="width:185px;">是否已递送至失物招领柜台：</div>
              <div class="message_content">{{ goodsObject['loseTime'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">航站楼[存放]：</div>
              <div class="message_content">{{ goodsObject['terminal'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">登记人：</div>
              <div class="message_content">{{ goodsObject['losePlace'] }}</div>
            </div>
          </div>
          <div class="detail_body">
              <div class="body_message">
                <div class="message_title">物品类型：</div>
                <div class="message_content">{{ goodsObject['name'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">捡拾日期：</div>
                <div class="message_content">{{ goodsObject['type'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">物品时效：</div>
                <div class="message_content">{{ goodsObject['expiration'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">捡拾人电话：</div>
                <div class="message_content">{{ goodsObject['ownersName'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">捡拾地：</div>
                <div class="message_content">{{ goodsObject['ownersPhone'] }}</div>
              </div>
              <div class="body_message">
                  <div class="message_title">&nbsp;</div>
                  <div class="message_content">&nbsp;</div>
                </div>
              <div class="body_message">
                <div class="message_title">存放地：</div>
                <div class="message_content">{{ goodsObject['loseTime'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">登记时间：</div>
                <div class="message_content">{{ goodsObject['terminal'] }}</div>
              </div>
            </div>
        </div>
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button class="buttonCancel" @click="centerDialogVisible = false">关闭</el-button>
          <el-button v-if="notReceive" class="buttonReceive" @click="centerDialogVisible = false">接收物品</el-button>
          <el-button class="buttonReceive" @click="handlerReceive">领取</el-button>
        </span>
      </template>
    </edit-dialog>

    <!-- 接收弹窗 -->
    <edit-dialog
        :centerDialogVisible="receiveDialogVisible"
        :tilte="tilte"
        :default-button="defaultButton"
        @Cancel="Cancel"
        @Submit="Submit"
        :width="dialogWidth">
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="receiveForm"
          :rules="receiveRules"
          label-position="right"
          label-width="100px"
          style="max-width: 460px;"
        >
          <el-form-item label="领取人姓名" prop="name">
            <el-input v-model.trim="receiveForm.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="领取人证件号" prop="code">
            <el-input v-model.trim="receiveForm.code" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="领取人电话" prop="phone">
            <el-input v-model.trim="receiveForm.phone" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="领取时间" prop="receiveTime">
            <!-- <el-input v-model.trim="receiveForm.receiveTime"/> -->
            <el-date-picker
              v-model="receiveForm.receiveTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="5" v-model.trim="receiveForm.remark"/>
            </el-form-item>
        </el-form>
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button class="buttonCancel" @click="handlerReceiveBack">返回</el-button>
          <el-button class="buttonReceive" @click="handlerConfirmReceive">确认领取</el-button>
        </span>
      </template>
    </edit-dialog>
    <!-- 新增弹窗 -->
    <edit-dialog
      :centerDialogVisible="addDialogVisible"
      :tilte="tilte"
      :default-button="defaultButton"
      @Cancel="Cancel"
      @Submit="Submit"
      :width="dialogWidth"
      >
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="receiveForm"
          :rules="receiveRules"
          label-position="left"
          label-width="120px"
          :inline="true"
        >
          <el-form-item label="物品名称：" prop="goodsName">
            <el-input maxlength="50" v-model.trim="addForm.goodsName" clearable/>
          </el-form-item>
          <el-form-item label="物品类型：" prop="goodsType">
            <el-input v-model.trim="addForm.goodsType" />
          </el-form-item>
          <el-form-item label="捡拾日期：" prop="date">
            <el-date-picker
              v-model="addForm.date"
              type="date"
              style="width: 192px"
            />
          </el-form-item>
          <el-form-item label="保质期：" prop="expire">
           <el-input
            v-model="addForm.expire"
            style="width: 192px"
          >
            <template #append>
              <el-select v-model="addForm.expireSelect" placeholder="请选择" style="width: 90px">
                <el-option label="小时" value="1" />
                <el-option label="天" value="2" />
                <el-option label="年" value="3" />
              </el-select>
            </template>
          </el-input>
          </el-form-item>
          <el-form-item label="物品时效：" prop="ageing">
              <el-input v-model.trim="addForm.ageing"/>
          </el-form-item>
          <el-form-item label="捡拾人姓名：" prop="pickUpName">
              <el-input v-model.trim="addForm.pickUpName"/>
          </el-form-item>
          <el-form-item label="捡拾人电话：" prop="pickUpPhone">
              <el-input v-model.trim="addForm.pickUpPhone"/>
          </el-form-item>
          <el-form-item label="航站楼[捡拾]：" prop="terminal">
            <el-select v-model.trim="addForm.terminal" placeholder="请选择" style="width: 192px">
              <el-option label="T3" value="T3" />
              <el-option label="T3" value="T3" />
              <el-option label="T3" value="T3" />
            </el-select>
          </el-form-item>
          <el-form-item label="捡拾地：" prop="pickUpAddress">
              <el-input v-model.trim="addForm.pickUpAddress"/>
          </el-form-item>
          <el-form-item label="航站楼[存放]：" prop="deposit">
            <el-select v-model.trim="addForm.terminal" placeholder="请选择" style="width: 192px">
              <el-option label="T3" value="T3" />
              <el-option label="T3" value="T3" />
              <el-option label="T3" value="T3" />
            </el-select>
          </el-form-item>
          <el-form-item label="存放地：" prop="deposit">
            <el-select v-model.trim="addForm.terminal" placeholder="请选择" style="width: 192px">
              <el-option label="T3" value="T3" />
              <el-option label="T3" value="T3" />
              <el-option label="T3" value="T3" />
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="图片：" >
            <el-upload
              v-model:file-list="fileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              limit="10"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
        </el-form>
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button class="buttonCancel" @click="Cancel">返回</el-button>
          <el-button class="buttonReceive" @click="handlerAddSubmit" :loading="loading">确定</el-button>
        </span>
      </template>
    </edit-dialog>
    <!-- 申请入库弹窗 -->
    <edit-dialog
      :centerDialogVisible="applyStoreDialogVisible"
      :tilte="tilte"
      :default-button="defaultButton"
      @Cancel="Cancel"
      @Submit="Submit"
      :width="dialogWidth">
      <template #content>
        <layout-card :filters="goodsRegStoreOptions" @search-change="searchChange" @search-reset="searchReset">
          <div class="table-common">
            <div class="goods">
              <div :class="applyStoreSelected.indexOf(index)!=-1 ? 'goods_content_select' : 'goods_content'" style=" width: calc((1920px - 780px) / 3);" @click="handlerApplyStoreSelect(item, index)" v-for="(item, index) in tableData" :key="index">
                <img
                  :src="image.loginBg"
                  class="image"
                />
                <div class="message">
                  <div class="message_content">
                    <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                  </div>
                  <div class="message_content" style="margin-top: 8px;">
                    <div class="headline">物品类型：</div>
                    <div class="headline_content">{{ item['goodsType'] }}</div>
                  </div>
                  <div class="message_content" style="margin-top: 4px;">
                    <div class="headline">遗失时间：</div>
                    <div class="headline_content">{{ item['loseTime'] }}</div>
                  </div>
                  <div class="message_content" style="margin-top: 4px;">
                    <div class="headline">遗失地：</div>
                    <div class="headline_content">{{ item['losePlace'] }}</div>
                  </div>
                  <div class="message_content" style="margin-top: 4px;">
                    <div class="headline">失主姓名：</div>
                    <div class="headline_content">{{ item['ownersName'] }}</div>
                  </div>
                </div>
                <div :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '1' ? 'red_overdue' : 'green_overdue')">
                  {{ item['overdue'] === '0' ? '' : (item['overdue'] === '1' ? '已过期' : '14小时后过期') }}
                </div>
              </div>
            </div>
          </div>
        </layout-card>
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button class="buttonCancel" @click="Cancel">取消</el-button>
          <el-button class="buttonReceive" @click="handlerStorageSubmit" :loading="loading">申请入库</el-button>
        </span>
      </template>
    </edit-dialog>
  </template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount } from 'vue'
import LayoutCard from '@/components/LayoutCard/index.vue'
import type { TabsPaneContext, FormInstance, UploadProps, UploadUserFile } from 'element-plus'
import editDialog from '@/components/editDialog/index.vue'
import TablePagination from '@/components/TablePagination/index.vue'
import { image } from '@/assets/index'
import { FilterItem } from '@/components/FilterBar/types'
import { goodsRegStoreOptions, goodsRegReturnOptions } from '@/views/lose/config/filters'
import { receiveRules } from './config/rules'
import { Plus } from '@element-plus/icons-vue'
import { fa } from 'element-plus/es/locale'

// 标题名
const activeName = ref('first')
// 详情弹窗是否打开
const centerDialogVisible = ref(false)
// 领取弹窗是否打开
const receiveDialogVisible = ref(false)
// 新增弹窗是否打开
const addDialogVisible = ref(false)
// 申请入库弹窗是否打开
const applyStoreDialogVisible = ref(false)
// 弹窗标题
const tilte = ref('新增')
const visible = ref(false)
const isAdd = ref(true)
const loading = ref(false)
const tableData = ref([])
const dialogWidth = ref('760px')
const defaultButton = ref(true)
const goodsObject = ref()
const notReceive = ref(false)
const applyStoreSelected = ref<Array<number>>([])
const ruleFormRef = ref<FormInstance>()
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const receiveForm = reactive({
  name: '',
  phone: '',
  code: '',
  receiveTime: '',
  remark: ''
})

const addForm = reactive({
  goodsName: '',
  goodsType: '',
  date: '',
  expire: '',
  expireSelect: '',
  ageing: '',
  pickUpName: '',
  pickUpPhone: '',
  terminal: '',
  pickUpAddress: '',
  deposit: ''
})

const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  },
  {
    name: 'plant-1.png',
    url: '/images/plant-1.png'
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  },
  {
    name: 'plant-2.png',
    url: '/images/plant-2.png'
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  },
  {
    name: 'figure-1.png',
    url: '/images/figure-1.png'
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  },
  {
    name: 'figure-2.png',
    url: '/images/figure-2.png'
  }
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const paneName = ref<any>('first')
/**
 * 标签页点击切换
*/
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.paneName, event)
  paneName.value = tab.paneName
  if (tab.paneName === 'second') {
    const arr:FilterItem[] = exampleOptions
    arr.push({
      label: '物品名称',
      prop: 'name',
      type: 'select',
      inputProps: {
        clearable: true,
        placeholder: '模糊匹配'
      }
    })
    exampleOptions = arr
    console.log(exampleOptions)
  }
}

/**
 * 批量接收
 */
const handleBatchReceive = () => {
  loading.value = false
}

/**
 * 申请入库
 */
const handleApplyStorage = () => {
  loading.value = false
  tilte.value = '申请入库'
  applyStoreDialogVisible.value = true
  defaultButton.value = false
  dialogWidth.value = '70%'
}

/**
 * 申请入库物品点击
 */
const handlerApplyStoreSelect = (item: any, index: number) => {
  if (applyStoreSelected.value.indexOf(index) !== -1) {
    applyStoreSelected.value.splice(applyStoreSelected.value.indexOf(index), 1)
  } else {
    applyStoreSelected.value.push(index)
  }
  console.log(applyStoreSelected.value)
}

/**
 * 入库提交
 */
const handlerStorageSubmit = () => {
  console.log('入库提交')
  applyStoreDialogVisible.value = false
  loading.value = false
}

/**
 * 点击新增方法
 */
const handleCreate = () => {
  defaultButton.value = false
  addDialogVisible.value = true
  tilte.value = '新增捡拾物品'
  dialogWidth.value = '760px'
  // isAdd.value = true
  // visible.value = true
}

/**
 * 新增提交
 */
const handlerAddSubmit = () => {
  loading.value = true
}

/**
 * 弹窗点击取消
 */
const Cancel = () => {
  loading.value = false
  centerDialogVisible.value = false
  receiveDialogVisible.value = false
  addDialogVisible.value = false
  applyStoreDialogVisible.value = false
  applyStoreSelected.value = []
}

/**
 * 弹窗点击确认
 */
const Submit = () => {
  loading.value = false
  centerDialogVisible.value = false
  receiveDialogVisible.value = false
  addDialogVisible.value = false
  applyStoreDialogVisible.value = false
  applyStoreSelected.value = []
}

/**
 * 点击领取
 */
const handlerReceive = () => {
  centerDialogVisible.value = false
  receiveDialogVisible.value = true
  tilte.value = '领取捡拾物品'
  dialogWidth.value = 'auto'
}
/**
 * 返回
 */
const handlerReceiveBack = () => {
  receiveDialogVisible.value = false
  centerDialogVisible.value = true
  dialogWidth.value = 'auto'
}

/**
 * 确认领取
 */
const handlerConfirmReceive = () => {
  receiveDialogVisible.value = false
}

/**
 * 卡片点击事件
 */
const goodsClick = (item: any) => {
  console.log(item)
  tilte.value = '查看捡拾物品'
  notReceive.value = true
  centerDialogVisible.value = true
  dialogWidth.value = 'auto'
  defaultButton.value = false
  goodsObject.value = {
    name: '钥匙',
    type: '物品类型',
    expiration: '1年',
    ownersName: '张伟',
    ownersPhone: '13509086789',
    loseTime: '2023-03-03',
    terminal: 'T3',
    losePlace: 'T3航站楼A区'
  }
}

// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}
// 查询条件
let exampleOptions: FilterItem[] = [
  {
    label: '物品类型',
    prop: 'project',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '物品名称',
    prop: 'name',
    type: 'select',
    inputProps: {
      clearable: true,
      placeholder: '模糊匹配'
    }
  },
  {
    label: '失主姓名',
    prop: 'state',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '遗失地',
    prop: 'place',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '航站楼',
    prop: 'place',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '遗失时间',
    prop: 'endTime',
    type: 'datePicker',
    defaultValue: [],
    inputProps: {
      type: 'daterange',
      'value-format': 'YYYY-MM-DD'
    }
  }
]
const search = ref({})
const getData = () => {
  loading.value = true
  // ...获取数据
  setTimeout(() => {
    const data = {
      list: [
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '1'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '1'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '1'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '0'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '0'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '0'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        }
      ],
      total: 100
    }
    loading.value = false
    // @ts-ignore
    tableData.value = data.list
    pager.total = data.total
  }, 500)
}

/**
 * 点击查询
 */
const searchChange = (data: FilterDataType) => {
  search.value = data
  if (applyStoreDialogVisible.value) {
    // 申请入库查询
    applyStoreSelected.value = []
  } else if (paneName.value === 'first') {
    // 存放中查询
    getData()
  } else {
    // 已归还查询
    getData()
  }
}

/**
 * 点击重置
 * @param data 数据
 */
const searchReset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  applyStoreSelected.value = []
  getData()
}

onBeforeMount(getData)
</script>

<style lang="less" scoped>
  .demo-tabs{
    background: #f5f7f9;
  }
  /deep/.el-tabs__header{
    padding: 0 24px 0 24px;
    border-bottom: none;
    // background: #f5f7f9;
    .el-tabs__nav-wrap {
      margin-bottom: none;
      background: #FFFFFF;
      .el-tabs__nav-scroll {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        .el-tabs__nav {
          border-bottom: 0.0625rem solid var(--el-border-color-light);
          border-radius: 0.25rem;
          .el-tabs__item{
            height: 30px;
          }
          .el-tabs__item:hover{
            background: #D3D4D5;
            color: gray;
          }
          .el-tabs__item.is-active {
            color: #FFFFFF;
            background: #337ECA;
            border-bottom-color: #337ECA;
          }
        }
      }
    }
  }
  .table-common {
    width: 100%;
    background-color: #fff;
    .goods{
      max-height: 450px;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      .goods_content:hover, .goods_content_select:hover {
        cursor: pointer;
      }
      .goods_content, .goods_content_select{
        width: calc((1920px - 336px) / 4);
        height: 180px;
        background: #F3F4F7;
        border-radius: 8px;
        margin-top: 24px;
        margin-right: 24px;
        display: flex;
        align-items: center;
        position: relative;
        .image{
          width: 132px;
          height: 132px;
          border-radius: 10px;
          margin-left: 15px;
        }
        .message{
          margin-left: 24px;
          .message_content{
            display: flex;
            .type{
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC_Bold;
              color: #535862;
              font-weight: bolder;
            }
            .terminal{
              margin-left: 16px;
              display: inline-block;
              text-align: center;
              width: 32px;
              height: 22px;
              line-height: 22px;
              background: rgba(0,148,255,0.12);
              border-radius: 6px;
              border: 1px solid rgba(47,143,241,0.4);
              font-size: 14px;
              color: #2F7DF1;;
            }
            .headline{
              width: 70px;
              height: 22px;
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC;
              color: #989DAA;
              line-height: 22px;
            }
            .headline_content{
              height: 22px;
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC;
              color: #535862;
              line-height: 22px;
            }
          }
        }
      }
      .goods_content_select {
        background: #EBF2FA;
        border:1px solid #327ECB;
      }
      .hidden_overdue{
        display: none;
      }
      .red_overdue{
        height: 28px;
        background: rgba(255,71,36,0.12);
        border-radius: 6px;
        border: 1px solid rgba(255,76,45,0.4);
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #F24A45;
        line-height: 28px;
        padding-left: 8px;
        padding-right: 8px;
        position: absolute;
        top: 8px;
        right: 8px;
      }
      .green_overdue{
        height: 28px;
        background: rgba(255,179,31,0.12);
        border-radius: 6px;
        border: 1px solid rgba(255,159,58,0.4);
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #FF8F3A;
        line-height: 28px;
        padding-left: 8px;
        padding-right: 8px;
        position: absolute;
        top: 8px;
        right: 8px;
      }
    }
  }
  .detail_content{
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 24px;
    padding-bottom: 0px;

    .content_img{
      width: 240px;
      height: 240px;
      border-radius: 15px;
    }
    .detail_body{
      width: auto;
      height: 240px;
      // background: rgba(238,243,255,0.56);
      border-radius: 8px;
      margin-left: 24px;
      padding-left: 24px;
      // padding-top: 16px;
      padding-bottom: 16px;
      box-sizing: border-box;
      .body_message{
        display: flex;
        line-height: 25px;
        .message_title{
          width: 100px;
          text-align: left;
          margin-bottom: 8px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #989DAA;
        }
        .message_content{
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #535862;
          margin-left: 10px;
        }
      }
    }
  }
  .buttonCancel{
    width: 88px;
  }
  .buttonReceive{
    width: 88px;
    color: #FFFFFF;
    background: #337FCC;
    border-radius: 6px;
    border: 1px solid #337FCC;
  }
  // .layout-card {
  //   /deep/.card-content{
  //     padding-right: 9px !important;
  //   }
  // }
</style>
